CSSの基本（19）−表の枠線を指定する
今回は、CSSを使って表（TABLE)の枠線を指定する方法を紹介します。表の枠線は、borderプロパティで指定しますが、どのタグに対して指定するかを理解していないと、思いどおりの枠線を描画できません。基本さえ抑えておけば難しくはないので、すぐにマスターできると思います。

→ 表の外枠を指定する
 
表の外枠をCSSで指定する場合は、TABLEタグにborderプロパティを指定します。もちろん、枠線の色や太さ、線種なども自由に指定できます。そのほか、border-bottomなどのプロパティを使って、上下左右の枠線を個別に指定することも可能です。なお、以下の例では、TABLEタグにclass属性を追加し、"t1"クラスのTABLEタグについてのみ枠線を指定しています。
<STYLE type="text/css">
TABLE.t1{
  border:3px #009900 dashed;
}
</STYLE>

<BODY>
  ：
<TABLE class="t1">
  ：
</TABLE>
  ：
 サンプルページ


→ 各セルの枠線を指定する
 
表内の各セルを区切る枠線を指定する場合は、TDタグに対してborderプロパティを指定します。TABLEの場合と同様に、class属性でTDタグを分類しておけば、何通りもの枠線を指定できます。そのほか、セル内の文字サイズや文字色、内部余白などの書式も、TDタグのCSSで指定するのが基本です。
<STYLE type="text/css">
TABLE.t1{
  border:3px #009900 dashed;
}
TD.c1{
  border:1px #FF0000 solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  color:#FF0000;
}
TD.c2{
  border:1px #0000FF solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
}
</STYLE>

<BODY>
  ：
<TABLE class="t1">
<TR><TD class="c1">りんご</TD><TD class="c2">100円</TD></TR>
<TR><TD class="c1">みかん</TD><TD class="c2">350円</TD></TR>
<TR><TD class="c1">桃</TD><TD class="c2">150円</TD></TR>
</TABLE>
  ：
 サンプルページ


→ 枠線の重なりを指定する
 
隣のセルと枠線を重ねる／重ねない、といった指定をCSSで行うことも可能です。この指定には、border-collapseプロパティを利用します。値に、collapseを指定すると枠線は重なって表示されます。一方、separateを値に指定すると、各セルの枠線を重ねないで表示できます。以下にそれぞれのサンプルを示しておくので、参考としてください。
<STYLE type="text/css">
TABLE.t1{
  border:3px #009900 solid;
  border-collapse:collapse;
}
TABLE.t2{
  border:3px #009900 solid;
  border-collapse:separate;
}
TD.c1{
  border:1px #FF0000 solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
  color:#FF0000;
}
TD.c2{
  border:1px #0000FF solid;
  padding:10px;
  font-size:16pt;
  font-weight:bold;
}
</STYLE>

<BODY>
  ：
<TABLE class="t1">
  ：
</TABLE>
<BR>
<TABLE class="t2">
  ：
</TABLE>
</BODY>
  ：
 サンプルページ


G�|�C���g�|�C���@Amazon Yahoo �y�V

�����z�[���y�[�W �y�V���o�C��[UNLIMIT��������1�~] �C�O�i���q���� �C�O���s�����������I